//创建路由
import { createRouter, createWebHashHistory, } from 'vue-router'
import { staticRoutes, anyRoutes } from '@/routers/modules/staticRouter'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import pinia from '@/stores'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useAuthStore } from "@/stores/modules/auth";
import { ElNotification } from "element-plus";
import { getTimeState } from "@/utils/index";

NProgress.configure({ showSpinner: false })

/**
 * @description 📚 路由参数配置简介
 * @param path ==> 路由菜单访问路径
 * @param name ==> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
 * @param redirect ==> 路由重定向地址
 * @param component ==> 视图文件路径
 * @param meta ==> 路由菜单元信息
 * @param meta.icon ==> 菜单和面包屑对应的图标
 * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
 * @param meta.activeMenu ==> 当前路由为详情页时，需要高亮的菜单
 * @param meta.isLink ==> 路由外链时填写的访问地址
 * @param meta.isHide ==> 是否在菜单中隐藏 (通常列表详情页需要隐藏)
 * @param meta.isFull ==> 菜单是否全屏 (示例：数据大屏页面)
 * @param meta.isAffix ==> 菜单是否固定在标签页中 (首页通常是固定项)
 * @param meta.unKeepAlive ==> 是否不缓存，默认不写为false，即缓存，处理详细见tabs组件的watch
 * */

const router = createRouter({
  // history: createWebHistory(),
  history: createWebHashHistory(),
  // 一开始只注册 staticRoutes 中的路由对象
  routes: [...staticRoutes,anyRoutes],
  //设置路由滚动行为，切换页面回到顶部
  scrollBehavior() {
    // vue-router@4 中的 left，top 对应 vue-router@3 中的 x，y
    return { top: 0, left: 0 }
  },
})
// https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html
// 为确保 pinia 实例被激活，最简单的方法就是将 useStore() 的调用放在 pinia 安装后才会执行的函数中。
// 要么传入pinia实例，要么在，router.beforeEach中实例化，因为路由器是在pinia被安装之后开始导航的
// 对于要持久化的数据，则只能采用第二种方式，否则持久化失效
const authStore = useAuthStore(pinia);
// 不用进行token检查的白名单路径数组
const whiteList = ['/login']

/**
 * @description 路由拦截 beforeEach
 * */
router.beforeEach(async (to, from, next) => {
  const userInfoStore = useUserInfoStore()

  // 1.NProgress 开始
  NProgress.start()

  // 2.动态设置标题
  const title = import.meta.env.VITE_GLOB_APP_TITLE;
  document.title = to.meta.title ? `${to.meta.title} - ${title}` : `${title}`
  // 3.判断是访问登陆页，有 Token 就保持在当前页面，没有 Token 重置路由到登陆页
  //处理跳转到登录页的情况

  if (to.path.toLocaleLowerCase() === '/login') {
    if (userInfoStore.token) return next(from.fullPath);
    resetRouter();
    return next();
  }

  // 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
  //处理跳转到白名单的情况
  if (whiteList.includes(to.path)) return next();

  // 5.判断是否有 Token，没有重定向到 login 页面（跳转非登录和非白名单页面后判断token存否）
  if (!userInfoStore.token) return next({ path: '/login', replace: true });
  // 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
  //（获取初始权限信息，以及处理pinia刷新数据丢失问题，每次刷新页面都重新获取权限并注册路由）
  if (!authStore.authMenuListGet.length) {
    console.log('刷新页面')
    await initDynamicRouter();
    return next({ ...to, replace: true });
  }
  // 7.存储 routerName 做按钮权限筛选
  // authStore.setRouteName(to.name as string);
  // 8.正常访问页面
  next();
});

/**
 * @description 路由跳转错误
 * */
router.onError(error => {
  NProgress.done();
  console.warn("路由错误", error.message);
});

/**
 * @description 路由跳转结束
 * */
router.afterEach((to, from, next) => {
  NProgress.done();
  if (from.path === '/login') {
    ElNotification({
      title: getTimeState(),
      message: "欢迎登录 XianDa-Admin",
      type: "success",
      duration: 3000
    });
  }

});
/**
 * @description 重置路由
 * @param {RouteRecordRaw[]} routes 要注册的路由
 */
export function resetRouter() {
  // 获取当前已经注册的路由信息
  // let routes = router.getRoutes()
  // 使用 router 对象下的 removeRoute 方法可以删除指定name 的路由信息
  // 注销动态路由
  authStore.authMenuListGet.forEach((route) => {
    // 防止因为尝试移除不存在的路由而导致的错误。
    if (route.name && router.hasRoute(route.name)) router.removeRoute(route.name);
  })
}



/**
 * @description 初始化用户路由
 */
import { RouteRecordRaw } from "vue-router";
export async function initDynamicRouter() {
  const authStore = useAuthStore();
  await authStore.getAuthData();
  // 2.判断当前用户有没有菜单权限
  // if (!authStore.authMenuListGet.length) {
  //   ElNotification({
  //     title: "无权限访问",
  //     message: "当前账号无任何菜单权限，请联系系统管理员！",
  //     type: "warning",
  //     duration: 3000
  //   });
  //   userStore.setToken("");
  //   router.replace(LOGIN_URL);
  //   return Promise.reject("No permission");
  // }
  // 注册路由默认情况下，router 对象注册的路由信息只包含 staticRoutes 中的路由对象，所以我们需要进行路由的动态注册
  // const registeredRoute = authStore.flatMenuListGet;
  // console.log(registeredRoute)
  const registeredRoute = authStore.showMenuListGet;
  console.log(registeredRoute,'[[[registeredRoute')
  registeredRoute.forEach((item) => {
    //动态配置路由表对应组件,如果路由与文件路径匹配,可以使用下面逻辑，自动获取component
    // if (item.component && typeof item.component == "string") {
      // 获取modules对象中与当前项目对应的模块文件的完整路径。
    //   item.component = modules["/src/views" + item.component + ".vue"];
    // }
    if (item.meta?.isFull) {
      router.addRoute(item as unknown as RouteRecordRaw);
    } else {
      router.addRoute("layout", item as unknown as RouteRecordRaw);
    }
  })
}
// 导出路由
export default router  